<template>
	<div>
	   	<ul>
	        <li><a href="../../../static/8.pdf" target="pdfContainer" @click="showPdf(true)">0001_pdf</a></li>   
	    </ul>
	    <div class="lightbox" id="lightbox"></div>
	    <div id="pop" class="pop" >
	        <a @click="close" style="
	            position: absolute;
	            right: -90px;
	            display: inline-block;
	            width: 80px;
	            height: 30px;
	        	" id="close">关闭</a>
	        <iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe>
	    </div>
	</div>
</template>
<script>
import '../../../static/pdf.js'
import '../../../static/pdf.worker.js'
　　export default {
　　　　mounted(){
			//showPdf(true)
			document.getElementById("pdfContainer").src="../../../static/8.pdf"
			
		},
　　　　methods: {
			showPdf(isShow) {
	            var state = "";
	            // if (isShow) {
	            //     state = "block";
	            // } else {
	            //     state = "none";
	            // }
	            var pop = document.getElementById("pop");
	            pop.style.display = state;
	            var lightbox = document.getElementById("lightbox");
	            lightbox.style.display = state;
	        },
	        close() {
	            this.showPdf(false);
	        }
　　　　}
　　}
</script>
<style lang="scss">
　　.lightbox{
            position: fixed;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            z-index: 7;
            opacity: 0.3;
            display: block;
            background-color: rgb(0, 0, 0);
            display: none;
        }
        .pop,iframe{
            position: absolute;
            left: 50%;
            top:0;
            width: 893px;
            height: 100%;
            margin-left: -446.5px;
            z-index: 9;
        }
</style>